<template>
  <div class="shop-wrap"  v-loading = "loading">
    <div class="shop-wrap-effect">我的钱包 > 商品销量</div>
      <div class="shop-wrap-sell">
        <div class="select-time">
        <div class="time-left">
          <p class="time-left-txt">下单时间: </p>
          <div class="time-box">
            <div class="time-select">
              <el-date-picker
                v-model="param.startTime"
                :picker-options="startTimeLimit"
                class="time-style"
                type="date"
                size="small"
                value-format="yyyy-MM-dd"
                placeholder="开始日期">
              </el-date-picker>
            </div>
            <p>-</p>
            <div class="time-select">
              <el-date-picker
                v-model="param.endTime"
                :picker-options="endTimeLimit"
                type="date"
                class="time-style"
                size="small"
                value-format="yyyy-MM-dd"
                placeholder="结束日期">
              </el-date-picker>
            </div>
          </div>
        </div>
      </div>
      <div class="shop-wrap-name">
        <div class="shop-wrap-brief">
          <div>商品名称:</div>
            <input type="text" v-model="param.goodsName" placeholder="请输入商品名称">
          </div>
        <!-- <div class="shop-wrap-query">查找订单</div>         -->
          <el-button 
          class="shop-wrap-query" 
          @click="searhGoods()"
          type="primary" 
          plain
          >查找订单
        </el-button>
      </div>
      </div>
      <div class="data-wrap">
        <div class="data-wrap-detail">
          <p class="data-wrap-show">数据明细</p>
          <!-- <div class="data-wrap-export">导出数据</div> -->
            <!-- <el-button 
              class="data-wrap-export" 
              type="primary" 
            >导出数据
            </el-button> -->
        </div>
        <div class="table-box">
            <el-table
              :data="tableData"
              border
              :header-cell-style="titleStyleA"
              :cell-style="titleStyle"
              style="width: 100%">
              <el-table-column
                prop="id"
                label="排行"
                >
              </el-table-column>
              <el-table-column
                prop="itemName"
                label="商品名称"
                >
              </el-table-column>
              <el-table-column
                prop="orderNum"
                label="订单量"
                >
              </el-table-column>
              <el-table-column
                prop="orderMoney"
                label="订单金额 (元)"
                >
              </el-table-column>
              <el-table-column
                prop="totalCommonIn"
                label="预估收入 (元)"
                >
              </el-table-column>
            </el-table>
        </div>
        <div class="pagination"  v-show = "total > 0">
          <el-pagination
            background
            :current-page = "param.pageNum"
            @current-change="changeCurrentPage"
            :page-sizes="[8,16,24]"
            @size-change="changeCurrentPageSize"
            :total = "total"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
          <div class="pageSearch" @click="pageSearch">确定</div>
        </div>
      </div>
  </div>
</template>
<script>
export default {
  async fetch({store}) {
     await store.commit('setWalletIndex', 1)
    await store.commit('setWalletTwoIndex', 2)
  },
  layout: 'internalouts',
   data() {
    return {
      startTimeLimit:{
        disabledDate:(time) =>{
          if(this.param.endTime){
            return time.getTime() > new Date(this.param.endTime).getTime();
          }
        },
      },
      endTimeLimit:{
        disabledDate:(time) =>{
          if (this.param.startTime) {
            return time.getTime() < new Date(this.param.startTime).getTime() - 1 * 24 * 60 * 60 * 1000
          }
        }
      },
      param : {
        startTime: null,
        endTime:null,
        goodsName:null,
        pageNum:1, //第一页
			  pageSize:8, //每页的条数
      },
      tableData: [],
      total:0, //总条数
      loading:false, //页面加载效果
    }
  },
  methods:{
    changeCurrentPage(page){ //改变当前页数
      this.param.pageNum = page; //赋值给当前页
      this.getGoodsData(); //调用列表接口
      this.$scrollTo();
    },
    changeCurrentPageSize(pageSize){ //改变条数
      this.param.pageNum = 1; //重新请求第一页
      this.param.pageSize = pageSize;  //设置条数
      this.getGoodsData();//调用列表接口
      this.$scrollTo();
    },
    pageSearch(){ //点击确定按钮时候调用分页事件
      this.getGoodsData();//调用列表接口
      this.$scrollTo();
		},
     titleStyleA() {
      return 'text-align:center;background:#FAFAFA'
    },
     titleStyle(){
      return 'text-align:center'
    },
    getGoodsData(){
      this.loading = true;
      this.tableData = [];
      this.$axios.$post('orderGoods',this.param).then(res => {
        this.loading = false;
        if(res.status === 200 ){
          for(let i in res.obj.list){
            let obj = res.obj.list[i]
            let id = parseInt(i)+1;
            obj.id = id;
            this.tableData.push(obj);
          }
          this.total = res.obj.total;
        }else{
          this.$message({
            message:res.msg,  
            type:'warning'
          });
         }
      })
      .catch(error => {
        this.$message({
          message:'请求失败',  
          type:'warning'
        });
        this.loading = fasle;
      })
    },
    searhGoods(){
      this.param.pageNum = 1; //重新请求第一页
      this.getGoodsData();
    }
  },
  mounted() {
    this.getGoodsData();
  },
}
</script>
<style scoped>
  .shop-wrap-effect{
    height:50px;
    line-height: 50px;
    color:#999999;
    font-size: 14px;
  }
  .shop-wrap-sell{
    padding: 20px;
    background: #fff;
  }
  .shop-wrap-name{
    display:flex;
    width:530px;
    justify-content: space-between;
    align-items: center;
    color:#666666;
  }
  .select-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding:0;
  }
  .select-time .time-right {
    width: 100px;
    height: 30px;
    background: #0096e6;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    border-radius: 100px;
    cursor: pointer;
  }
  .time-style {
    width: 140px;
  }
  .time-left {
    display: flex;
    align-items: center;
  }
  .time-left-txt {
    font-size: 14px;
    color: #666;
    margin-right: 14px;
  }
  .time-box {
    display: flex;
    align-items: center;
    text-align: center;
  }
  .time-box p {
    width: 30px;
  }
  .shop-wrap-brief{
    display:flex;
    width:379px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
  }
  .shop-wrap-brief>input{
    display:inline-block;
    width: 305px;
    height: 34px;
    border:1px solid #ebebeb;
    border-radius:3px;
    text-indent:12px;
    box-sizing: border-box;
  }
  .shop-wrap-brief>input:focus{
    border:1px solid #0096e6;
  }
  .shop-wrap-query,.data-wrap-export{
    font-size: 14px;
    background-color: #0096e6;
    color:#fff;
    border-radius:15px;
    padding:8px 22px;
    box-sizing: border-box;
    outline: none;
    border: none;
    cursor: pointer;
  }
  .shop-wrap-query:hover,.data-wrap-export:hover{
    background:#66B1FF;
  }
  .data-wrap{
    margin-top:10px;
    background: #fff;
    padding:0 47px 47px 47px;
  }
  .data-wrap-detail{
    height:70px;
    display:flex;
    justify-content:space-between;
    align-items: center;
    color:#fff;
    font-size: 14px;
  }
  .data-wrap-show{
    width:60px;
    height:27px;
    color:#0096e6;
    border-bottom:1px solid #0096e6;
    margin-left:-27px;
  }
  .pagination .pageSearch:hover{
    background:#66B1FF;
  }
  .pagination{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin:20px 0 50px 0;
  }
  .pagination .pageSearch{
    width:60px;
    height:28px;
    line-height:28px;
    text-align:center;
    border-radius:15px;
    background:#0096e6;
    color:#ffffff;
    font-size:14px;
    cursor:pointer;
    margin-left:10px;
    user-select:none;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color:#0096e6;
  }
  /* 暂无数据960px的 */
  .no-wrap{
    width:960px;
    height:40px;
    line-height:40px;
    text-align:center;
    background:#ffffff;
    font-weight:bold;
    letter-spacing:2px;
    color:#666666;
    font-size:18px;
    border-radius:4px;
    box-shadow:0 0 6px #c2c2c2;
    margin:0 0 20px 0;
  }
  input::-webkit-input-placeholder{
		color:#C0C4CC;
	}
	input::-moz-input-placeholder{
		color:#C0C4CC;
	}
	input:-ms-input-placeholder{
		color:#C0C4CC;
	}
  /* 修改elementUI样式*/
  .el-icon-date:before{
    content:''
  }
  .el-date-picker__header{
    display:flex;
  }
  .el-input__inner{
    width: 120px;
  }
  .el-date-editor.el-input{
    width:120px;
  }
  /deep/ .el-icon-date::before{
    content:''
  }
</style>
